<!-- 权限选择器 -->
<script setup>
import {ref, watch} from "vue";
import {allTree} from '@/api/system/menu.js'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  selected: {
    type: Array,
    default: () =>([])
  }
})

const emit = defineEmits(['update:visible', 'select'])

const dialogVisible = ref(false)

//已勾选的权限列表
const selectedData = ref([])

const treeRef = ref(null)

//权限数据
const permissionData = ref([
  {id: 1, name: '系统管理', target: {id: 1, name: '系统管理', type: 1}, children: [
      {id: 11, name: '管理员用户', target: {id: 1, name: '管理员用户', type: 2}, children: [
            {id: 111, name: '列表', target: {id: 1, name: '系统管理', type: 3}},
            {id: 112, name: '新增', target: {id: 1, name: '系统管理', type: 3}},
            {id: 113, name: '编辑', target: {id: 1, name: '系统管理', type: 3}},
            {id: 114, name: '删除', target: {id: 1, name: '系统管理', type: 3}},
          ]},
      {
        id: 12, name: '日志审计', target: {id: 12, name: '日志审计', type: 1}, children: [
          {id: 121, name: "登录日志", target: {id: 121, name: '登录日志', type: 2}, children: [
              {id: 1211, name: '列表', target: {id: 1211, name: '列表', type: 3}}
            ]},
          {id: 122, name: '操作日志', target: {id: 122, name: '操作日志', type: 2}, children: [
              {id: 1221, name: '列表', target: {id: 1221, name: '列表', type: 3}}
            ]}
        ]
      }
    ]}
])

watch(() => props.visible, (newVal) => {
  if (newVal) {
    //获取权限列表
    allTree().then(resp => {
      permissionData.value = resp.data

      selectedData.value = props.selected
      console.log(111, selectedData.value)
      dialogVisible.value = true
    })
  } else {
    dialogVisible.value = false
  }
})

//取消
const onCancel = () => {
  emit('update:visible', false)
}

//确认
const onConfirm = () => {
  if (!treeRef.value) return
  const checkedKeys = treeRef.value.getCheckedKeys(false)
  emit('select', checkedKeys)
}

//自定义节点样式
const customNodeClass = (treeNodeData, node) => {
  return treeNodeData.target.type === 2 ? 'is-penultimate' : ''
}

//关闭事件清理工作
const dialogClose = () => {
  permissionData.value = []
  selectedData.value = []
  emit('update:visible', false)
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="权限选择器" :close-on-click-modal="false" width="620" @close="dialogClose">
    <div class="permission-content">
      <el-tree ref="treeRef"
               :data="permissionData"
               show-checkbox
               node-key="id"
               default-expand-all
               :expand-on-click-node="false"
               check-strictly
               :default-checked-keys="selectedData"
               :props="{class: customNodeClass, label: 'name', children: 'children'}"
      />
    </div>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.permission-content {
  height: 480px;
  overflow: auto;
}

:deep(.is-penultimate > .el-tree-node__children) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .el-tree-node {
    width: 132px;
  }
}
</style>
